import { ProCard } from '@ant-design/pro-components';
import { Badge, Card, Divider, Image, List, Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import { listInterfaceInfoVoByPageUsingPost } from '@/services/api/interfaceInfoController';
import { history } from '@umijs/max';
import Search from 'antd/lib/input/Search';

const InterfaceListPage: React.FC = () => {
  const defaultParams = {
    pageSize: 20,
    current: 1,
  };
  const [interfaceList, setInterfaceList] = useState<API.InterfaceInfoVO[]>([]);
  const [searchParams, setSearchParams] = useState<API.InterfaceInfoQueryRequest>({
    ...defaultParams,
  });
  const [loading, setLoading] = useState<boolean>(false);
  const [total, setTotal] = useState<number>(0);
  const [searchText, setSearchText] = useState<string>('');

  const load = async () => {
    setLoading(true);
    try {
      const res = await listInterfaceInfoVoByPageUsingPost(searchParams);
      if (res.data) {
        setInterfaceList(res.data.records ?? []);
        setTotal(res.data.total ?? 0);
      }
    } catch (e) {}
    setLoading(false);
  };

  const onSearch = () => {
    setSearchParams({
      ...searchParams,
      name: searchText,
      description: searchText,
    });
  };

  useEffect(() => {
    load();
  }, [searchParams]);

  return (
    <>
      <Card hoverable>
        <ProCard layout={'center'}>
          <Search
            showCount
            value={searchText}
            onChange={(e) => {
              setSearchText(e.target.value);
            }}
            allowClear
            size={'large'}
            maxLength={50}
            enterButton="搜索"
            placeholder={'没有找到心仪的接口？快搜索一下吧'}
            onSearch={onSearch}
            style={{ maxWidth: 600, height: 50 }}
          />
        </ProCard>
      </Card>
      <Divider />
      <Spin spinning={loading}>
        <List
          pagination={{
            onChange: (page) => {
              setSearchParams({
                ...searchParams,
                current: page,
              });
            },
            pageSize: searchParams.pageSize,
            total: total,
          }}
          grid={{
            gutter: 20,
            xs: 1,
            sm: 1,
            md: 2,
            lg: 4,
            xl: 5,
            xxl: 6,
          }}
          dataSource={interfaceList}
          renderItem={(item) => (
            <List.Item key={item.id}>
              <ProCard key={item.id} bordered hoverable direction="column" style={{ height: 236 }}>
                <ProCard
                  layout="center"
                  onClick={() => {
                    history.push(`/interface_info/${item.id}`);
                  }}
                >
                  <Badge count={item.totalInvoke} overflowCount={999999999} color="#eb4d4b">
                    <Image
                      style={{ width: 70 }}
                      src={item.avatarUrl ?? '/logo.svg'}
                      fallback={'/logo.svg'}
                      alt={item.name}
                      preview={false}
                    />
                  </Badge>
                </ProCard>
                <ProCard
                  onClick={() => {
                    history.push(`/interface_info/${item.id}`);
                  }}
                  layout="center"
                  style={{ marginTop: -10, fontSize: 16 }}
                >
                  {item.name}
                </ProCard>
                <ProCard
                  onClick={() => {
                    history.push(`/interface_info/${item.id}`);
                  }}
                  layout="center"
                  style={{ marginTop: -18, fontSize: 14 }}
                >
                  {!item.description
                    ? '暂无接口描述'
                    : item.description.length > 15
                    ? item.description.slice(0, 15) + '...'
                    : item.description}
                </ProCard>
              </ProCard>
            </List.Item>
          )}
        />
      </Spin>
    </>
  );
};

export default InterfaceListPage;
